
  <!--star main --> 
    
    <main>    
      <div class="abox">
	      <figure>
		      <fcapion>
		     <h1><%= t('.group1') %> </h1>
		      </fcaption>
		      <a href="#"><img src="images/bror.jpg" alt="I love graphic" width="289" height="175" /></a>
	      </figure>
      </div>
    <div class="abox">
	      <figure>
		      <fcapion>
		      <h1><%= t('.group2') %> </h1>
		      </fcaption>
		      <a href="#"><img src="images/nat.jpg" alt="I love graphic" width="287" height="176" /></a>      
	      </figure>
    </div>
    <div class="abox">
	      <figure>
		      <fcapion>
		     <h1><%= t('.group3') %></h1>
		      </fcaption><a href="#"></a><a href="#"><img src="images/nas.jpg" alt="I love graphic" width="289" height="178" /></a>
	      </figure>
      </div>   
    </main>
    <!--end main -->
    <!--start middle -->
    <middle>    
      <div class="enter"><P >about information group...<br></P>
      <div class="imgteaser">
			<a href="#"><img src="images/p1.png" alt="Todo el Todo" width="413" height="220" /><span class="desc">
			<strong>LIBRARY-MANAGEMENT - nguyencongdinh</strong>
			hi everyone!.</span></a></div><div class="btn"> <a href="#">Read More...</a></div>
      </div>	
      <div class="section_slogan"><img src="images/quote-right.png" alt="images" /><span class="cursive"> Library for everyone! </span><img src="images/quote-left.png" alt="images" /></div>
      <div class="middle_box"><h1><img src="images/fav.png" width="16" height="16" /> <a href="#">News</a></h1>
      <ol>
        <img src="images/dialog-ok.png" width="16" height="16" /> new1</ol>
      <ol>
        <img src="images/dialog-ok.png" width="16" height="16" />new2 </ol>
      <ol>
        <img src="images/dialog-ok.png" width="16" height="16" /> new3</ol>
     <ol> <img src="images/dialog-ok.png" width="16" height="16" /> new4</ol>
      </div>
      <div class="middle_box"><h1><img src="images/fav.png" width="16" height="16" /> <a href="#">referent</a></h1>
        <p><img src="images/dialog-ok.png" width="16" height="16" /> about book great...</p>
        <ol>
        <img src="images/dialog-ok.png" width="16" height="16" /> referent2
        </ol>
      <ol>
        <img src="images/dialog-ok.png" width="16" height="16" /> referent3
      </ol>
      <ol> <img src="images/dialog-ok.png" width="16" height="16" /> referent4</ol>
      </div>
      <div class="middle_box">
        <h1><img src="images/fav.png" width="16" height="16" /> <a href="#">Author </a></h1>
        <img src="images/dialog-ok.png" width="16" height="16" /> Nguyen Cong Dinh</ol>
      <ol>
        <img src="images/dialog-ok.png" width="16" height="16" /> Author2</ol>
      <ol>
        <img src="images/dialog-ok.png" width="16" height="16" /> Author3</ol>
     <ol> <img src="images/dialog-ok.png" width="16" height="16" /> Author4</ol>
      </div>
    </middle>